import { ipcRenderer } from 'electron';
import React, { useEffect, useState } from 'react';
import './index.css';
import { getSeting } from '@ui/services'
import { TextProps } from '@ui/types'
const Main = () => {
  const [data, setData] = useState<TextProps>();

  useEffect(() => {
    ipcRenderer.on('get-new-set', get);
  }, []);

  useEffect(() => {
    get();
  }, []);

  const get = () => {
    getSeting().then((res: TextProps) => {
      console.log(res);
      setData(res);
    })
  }

  return (
    <div className={`App ${data?.fade ? 'twinkling' : ''}`}>
      <div className={`text ${data?.fade ? 'twinkling' : ''}`} style={{
        textShadow: `0px 2px 10px rgba(${data?.shadowColor.r}, ${data?.shadowColor.g}, ${data?.shadowColor.b}, ${data?.shadowColor.a})`,
        color: `rgba(${data?.color.r}, ${data?.color.g}, ${data?.color.b}, ${data?.color.a})`,
        fontSize: data?.fontSize,
        animationDuration: data?.speed,
        whiteSpace:'nowrap'
      }}>
        {data?.scrollText}
      </div>
    </div>
  );
};

export default Main;
